<script>
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import axios from "axios";
import { getSessionStorage } from "@/common"
import moment from 'moment';
export default {
    setup() {
        const router = useRouter()

        const state = reactive({
            doctorName: getSessionStorage('doctor').realName,
            selectForm: {
                userId: '',
                realName: '',
                sex: '',
                orderDate: '',
                state: '1',
                smId: ''
            },
            ordersPageResponseDto: {},
        })



        listOrders(1);
        function listOrders(pageNum) {
            state.selectForm.pageNum = pageNum;
            state.selectForm.maxPageNum = 12;
            axios.post("/api/orders/listOrders", state.selectForm).then((response) => {
                console.log(response.data)
                state.ordersPageResponseDto = response.data.data
                let arr = response.data.data.list
                for (let i = 0; i < arr.length; i++) {
                    arr[i].orderDate = moment(arr[i].orderDate).format('YYYY-MM-DD')
                }
                state.ordersPageResponseDto.list = arr
                console.log(state.ordersPageResponseDto); // 输出 totalRow
            })
                .catch((error) => {
                    console.error(error);
                });
        }

        // 生成检查报告
        function ciReport(row) {
            // state.state1 = row.state
            axios.post("/api/ciReport/createReportTemplate", {
                orderId: row.orderId,
                smId: row.smId
            }).then((response) => {
                if (response.data == 1) {
                    router.push({ path: '/reportcontent', query: { orderId: row.orderId, state: row.state } });
                }
                else {
                    alert('生成报告模板失败！');
                }
            }).catch((error) => {
                console.error(error);
            });
        }

        //上下页 
        function currentChange(pageNum) {
            listOrders(pageNum);
        }

        //查询
        function Onsubmit() {
            listOrders(1);

        }

        //重置
        function reset() {
            state.selectForm = {
                userId: '',
                realName: '',
                sex: '',
                orderDate: '',
                state: '1',
                smId: ''
            };
            listOrders(1); // Reset and fetch the first page
        }

        return {
            ...toRefs(state),
            listOrders,
            Onsubmit,
            reset,
            currentChange,
            ciReport
        }
    }
}
</script>



<template>
    <div class="common-layout">
        <el-container style="height: 100%;">
            <el-header>
                <h1>XiXin&nbsp;&nbsp;&nbsp;熙心健康体检管理系统</h1>
                <p>医生：{{ doctorName }}</p>
            </el-header>
            <el-container>
                <el-aside width="260px">
                    <h4>体检客户查询</h4>
                    <el-form :model="selectForm" label-width="auto" style="max-width: 600px">
                        <el-form-item label="手机号码">
                            <el-input v-model="selectForm.userId" placeholder="手机号码" />
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="selectForm.realName" placeholder="姓名" />
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="selectForm.sex">
                                <el-radio value="1">男</el-radio>
                                <el-radio value="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="套餐类型">
                            <el-select v-model="selectForm.smId" placeholder="套餐类型">

                                <el-option label="男士-基础套餐" value="1" />
                                <el-option label="男士-肾病套餐" value="2" />
                                <el-option label="男士-肝病套餐" value="3" />

                                <el-option label="女士-基础套餐" value="4" />
                                <el-option label="女士-肾病套餐" value="5" />
                                <el-option label="女士-肝病套餐" value="6" />

                            </el-select>
                        </el-form-item>
                        <el-form-item label="体检日期">
                            <el-col :span="24">
                                <el-form-item prop="date1">
                                    <el-date-picker v-model="selectForm.orderDate" type="date" placeholder="体检日期"
                                        style="width: 100%" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="是否归档">
                            <el-radio-group v-model="selectForm.state">
                                <el-radio value="1" border>未归档</el-radio>
                                <el-radio value="2" border>已归档</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item style="margin-left: 20%;">
                            <el-button type="primary" @click="Onsubmit">查询</el-button>
                            <el-button type="warning" @click="reset" style="margin-left: 20px;">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-aside>
                <el-main>
                    <el-table :data="ordersPageResponseDto.list" style="width: 100%">
                        <el-table-column fixed prop="orderId" label="预约编号" width="120" />
                        <el-table-column prop="userId" label="手机号" width="120" />
                        <el-table-column prop="users.realName" label="真实姓名" width="100" />
                        <el-table-column label="性别" width="90">
                            <template #default="scope">
                                <span>{{ scope.row.users.sex == 1 ? "男" : "女" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="smName" label="体检套餐类型" width="150" />
                        <el-table-column prop="hpName" label="体检医院" width="200" />
                        <el-table-column prop="orderDate" label="体检日期" width="120" />
                        <el-table-column fixed="right" label="操作" min-width="100">
                            <template #default="scope">
                                <el-button type="text" @click="ciReport(scope.row)">{{ scope.row.state == 1
                                    ? '编辑体检报告' : '查看体检报告' }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next, total" :total="ordersPageResponseDto.totalRow"
                        :page-size="ordersPageResponseDto.maxPageNum" style="margin-top: 20px"
                        @current-change="currentChange" />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>



<style scoped>
.common-layout {
    height: 845px;
}

.el-header {
    background-color: #B3C0D1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1c51a3;
}

.el-header h1 {
    font-size: 22px;
    font-weight: 700;
}

.el-header p {
    font-size: 16px;
}

.el-aside {
    background-color: #D3DCE6;
    box-sizing: border-box;
    padding: 20px;
}

.el-aside h4 {
    color: #555;
    margin-bottom: 10px;
}

.el-main {
    background-color: #E9EEF3;
}
</style>